<template>
  <CardModules title="报警统计">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
  </CardModules>
</template>
<script setup>
  import CardModules from '/@/components/cardModules/index.vue';
  import { ref, onMounted, onBeforeUnmount } from 'vue';
  import * as echarts from 'echarts';

  // 创建一个 ref 来引用图表的 DOM 容器
  const chartRef = ref(null);
  let chartInstance = null;

  // 定义初始化图表的函数
  const initChart = () => {
    // 确保 chartRef 已经挂载到 DOM
    if (chartRef.value) {
      // 初始化 ECharts 实例
      chartInstance = echarts.init(chartRef.value);

      // 配置饼图的选项
      const options = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '船舶超速' },
              { value: 735, name: '船舶偏航' },
              { value: 580, name: '未开AIS' },
              { value: 484, name: '未穿救生衣' },
              { value: 300, name: '其他' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      // 使用指定的配置项和数据显示图表
      chartInstance.setOption(options);
    }
  };

  // 使用 onMounted 生命周期钩子在组件挂载后初始化图表
  onMounted(() => {
    initChart();
  });

  // 使用 onBeforeUnmount 生命周期钩子在组件卸载前销毁图表实例，防止内存泄漏
  onBeforeUnmount(() => {
    if (chartInstance) {
      chartInstance.dispose();
    }
  });
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
